<template>
    <div style="padding:10px;background-color: white;">
        <Search @submit="handleSearch" @reset="handleReset">
            <AFormItem label="客户手机号" >
                <AInput v-model:value="state.formData.mobile"></AInput>
            </AFormItem>
            <AFormItem label="客户名称" >
                <AInput v-model:value="state.formData.realName"></AInput>
            </AFormItem>
        </Search>
    </div>
    <div style="padding:10px;margin-top:10px;background-color: white;">
        <div style="margin-bottom: 10px;">
            <AButton type="primary"  @click="addUser">新增</AButton>
        </div>
        <ATable :data-source="state.dataSource" :columns="columns" bordered :pagination="false"></ATable>
        <Pagination :pagination="state.pagination" @change="pageChange"></Pagination>
    </div>
    <FormModal v-if="state.userModalVisibel" @ok="userModalOk" @cancel="cancelUserModal" :currentWxUser="state.currentWxUser"></FormModal>
</template>
<script lang="ts" setup>
import {reactive,h,onMounted,computed} from "vue";
import Search from '@/components/Search/Search.vue';
import Pagination from "@/components/Pagination/index.vue";
import { CommontTypes, PageResult, ResponseVo, WxUserTypes} from "@/type"
import { WxUserService } from "@/service";
import FormModal from "./components/FormModal/index.vue";
import { Button, Popconfirm } from "ant-design-vue";

const columns = computed(()=>{
    let list = [
    {title:"姓名",dataIndex:"realName"},
    {title:"手机号",dataIndex:"mobile"},
    {title:"昵称",dataIndex:"nickName"},
    {title:"性别",dataIndex:"gender",customRender:({record}:{record:WxUserTypes.IWxUserItem})=>{
        return h('span',{},record.gender==0?'女':'男')
    }},
    {title:"头像",dataIndex:"avatar",customRender:({record}:{record:WxUserTypes.IWxUserItem})=>{
        return h('img',{src:record.avatar,width:32,height:32},[])
    }},
    {title:"生日",dataIndex:"birthday",customRender:({record}:{record:WxUserTypes.IWxUserItem})=>{
        return record.birthday.slice(0,11)
    }},
    {title:"累计消费",dataIndex:"totalCostAmt",width:100},
    {title:"创建人",customRender:({record}:{record:WxUserTypes.IWxUserItem})=>{
        return h('div',{},record.creator?`${record.creator}/${record.createTime}`:'-')
    }}  ]
    if(!props.isInModal){
        list.push({title:"操作",customRender:({record}:{record:WxUserTypes.IWxUserItem})=>{
        return h('div',{style:"display:flex"},[
        h(Button,{type:"text",onClick:()=>editUser(record)},"编辑"),
         h(Popconfirm,{title:"确认执行此操作",onConfirm:()=>deleteWxUser(record)},[ h(Button,{type:"text"},"删除")])
        ])
    }})
    }

    return list;
})

const state = reactive<{
    formData: Partial<WxUserTypes.PageWxUserType>,
    pagination:CommontTypes.IPagination,
    dataSource:WxUserTypes.IWxUserItem[],
    userModalVisibel: boolean,
    currentWxUser:Partial<WxUserTypes.IWxUserItem>
}>({
    formData:{
      
        
    },
    pagination:{
        pageNum:1,
        pageSize:10,
        total:0
    },
    dataSource:[],
    userModalVisibel:false,
    currentWxUser:{}
})

const props = defineProps<{
    isInModal:boolean
}>()

onMounted(()=>{
    handleSearch();
})

const handleSearch = async()=>{
    const res:ResponseVo<PageResult<WxUserTypes.IWxUserItem>>= await WxUserService.pageWxUser({...state.formData,...state.pagination});
    if(res.code===0){
        state.dataSource = res.data.list;
        state.pagination.total = res.data.total;
    }
}

const pageChange = (page:number,size:number)=>{
    state.pagination.pageNum = page;
    state.pagination.pageSize = size;
    handleSearch();
}

const handleReset = ()=>{
    state.formData = {};
    state.pagination.pageNum=1;
    state.pagination.total=0;
    handleSearch();
}

const addUser = ()=>{
    state.userModalVisibel = true;
    state.currentWxUser = {};
}

const editUser = async(record:WxUserTypes.IWxUserItem)=>{
    state.currentWxUser ={};
    let res:ResponseVo<WxUserTypes.IWxUserItem> =await WxUserService.detailWxUser(record.id);
        console.log(res)
    if(res.code===0){
        state.currentWxUser = {...res.data};
        console.log("state.currentUser--->",state.currentWxUser);
        state.userModalVisibel = true;
    }
}

const deleteWxUser = async(record:WxUserTypes.IWxUserItem)=>{
    let res:ResponseVo<WxUserTypes.IWxUserItem> =await WxUserService.deleteWxUser(record.id);
        console.log(res)
    if(res.code===0){
        state.pagination.pageNum=1;
        handleSearch();
    }
}

const cancelUserModal = ()=>{
    state.userModalVisibel = false;
}

const userModalOk = ()=>{
    state.userModalVisibel = false;
    state.pagination.pageNum=1;
    handleSearch();
}

</script>
<style lang="ts" setup>

</style>